<template>
   <!-- 加载图标样式22 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   animation: rotation 1s linear infinite;
   border: 3px solid #1678ff;
   border-radius: 50%;
   display: inline-block;
   height: 54px;
   position: relative;
   width: 54px
}

.loading:after {
   border-color: #1678ff transparent #04be02;
   border-radius: 50%;
   border-style: solid;
   border-width: 6px;
   content: "";
   height: 40px;
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 40px
}

@keyframes rotation {
   0% {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(1turn)
   }
}
</style>
